<script setup>
import {userInfoStore}from "../stores/UserInfoPinaStores.js";
import { ref ,reactive} from 'vue';
import {useRouter} from 'vue-router';
//导入axios
import request  from "../axios/axios";

//使用
let  routerss= useRouter();
let user= userInfoStore()

let username=user.getUserName;//获取用户名
let uSex=ref(user.getUserSex)//用户性别变量
let uXh=ref(user.getUserXh)//用户学号变量
let uPhone=ref(user.getUserPhone)//用户手机号变量

let nameSex=ref("")//用户性别提示变量
let nameXh=ref("")//用户学号提示变量
let namePhone=ref("")//用户手机号提示变量



//检查用户性别
function checkUserSex(){
    if(uSex.value=="男" || uSex.value=="女"){
        nameSex.value="OK";
        return true;
    }else{
        nameSex.value="男 OR 女";
        return false;
    }
}
//检查学号格式
function checkUserXh(){
    //定义学号2202220429
    var userXhReg=/^[1-9][0-9]{9}$/;
    if(userXhReg.test(uXh.value)){
        nameXh.value="OK";
        return true;
    }else{
        nameXh.value="学号为10十位数字,首位不为0";
        return false;
    }
}
//检查手机号格式
function checkUserPhone(){
    var userPhoneReg=/^[1]{1}[0-9]{10}$/;
    if(userPhoneReg.test(uPhone.value)){
        namePhone.value="OK";
        return true;
    }else{
        namePhone.value="手机格式有误";
        return false;
    }
}
//检查修改状态
function checkAlter(){
   if(checkUserSex() || checkUserXh() ||checkUserPhone()) {
      return true;
   }else{
      return false;
   }
}
async function send(){
   if(checkAlter()){
      console.log(username)
      console.log("发送数据")
      //使用axios发送请求
      console.log(username,uPhone.value,uXh.value,uSex.value)
      let data= await request.get(
         "/alterUser",
         //获取请求体中的数据
         {
            
            params:{
               userName:username,
               userphone:uPhone.value,
               userxh:uXh.value,
               usersex:uSex.value
            }
         }

      )
      //根据数据状态码判断
      if(data.data.statusCode==202){
         alert("修改成功,稍后退出登录");
         user.$reset();
         //使用路由跳出函数
         routerss.push("/login")

      }


      
   }
}

</script>

<template>
   <div class="tb_content">
      <table style="width: 100%; height: 60%;">
      <tr class="trb">
         <td class="name"></td ><td class="content" >原始状态</td> <td class="right">修改</td>
      </tr>
      <tr class="trb">
         <td class="name">用户名字</td ><td class="content" v-text="user.getUserName" ></td><td></td>
      </tr>

      <tr class="trb">
         <td class="name">用户性别</td ><td class="content" v-text="user.getUserSex"></td> <td><input type="text" @blur="checkUserSex()" class="inputStyle"  v-model="uSex"/><span v-text="nameSex"></span></td>
      </tr>

      <tr class="trb">
         <td class="name">用户学号</td ><td class="content" v-text="user.getUserXh"></td> <td><input type="text" @blur="checkUserXh()" class="inputStyle" v-model="uXh"/><span v-text="nameXh"></span></td>
      </tr>

      <tr class="trb">
         <td class="name">用户电话号码</td ><td class="content" v-text="user.getUserPhone"></td> <td><input type="text"  @blur="checkUserPhone()" class="inputStyle" v-model="uPhone" /><span v-text="namePhone"></span></td>
      </tr>
      <tr class="trb">
         <td class="name">修改</td ><td class="content" ></td> <td><button @click="send()">确认修改</button></td>
      </tr>
   </table>
   </div>
</template>

<style scoped>
   .name{   
      width: 10%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .content{
      width: 50%;
      
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }

</style>
